<template>
  <div class="page">
    <!-- start	开始拖动时触发的事件
    add	从一个数组拖拽到另外一个数组时触发的事件
    remove	移除事件
    update	拖拽变换位置时触发的事件
    end	拖拽完成时的事件
    choose	鼠标点击选中要拖拽元素时的事件
    unchoose	选中后松开鼠标的事件
    sort	位置变化时的事件
    clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素 -->

    <!-- 
        group	:group= "name"，相同的组之间可以相互拖拽
        sort	:sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
        delay	:delay= "0", 鼠标按下后多久可以拖拽
        touchStartThreshold	鼠标移动多少px才能拖动元素
        disabled	:disabled= "true",是否启用拖拽组件
        animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
        handle	:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
        filter	:filter=".unmover" 设置了unmover样式的元素不允许拖动
        draggable	:draggable=".item" 那些元素是可以被拖动的
        ghostClass	:ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
        chosenClass	:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
        dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
        dataIdAttr	dataIdAttr: 'data-id'
        forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
        fallbackClass	默认false，克隆的DOM元素的类名
        allbackOnBody	默认false，克隆的元素添加到文档的body中
        fallbackTolerance	拖拽之前应该移动的px
        scroll	默认true,有滚动区域是否允许拖拽
        scrollFn	滚动回调函数
        scrollSensitivity	距离滚动区域多远时，滚动滚动条
        scrollSpeed	滚动速度 
    -->

    <!--使用draggable组件-->
    <div class="itxst">
      <span>A、B列可以相互拖动，无法拖到C列</span>
      <div class="col">
        <div class="title">A列</div>
        <draggable
          v-model="arr1"
          group="site"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr1" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">B列</div>
        <draggable
          v-model="arr2"
          group="site"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
          @sort="sort"
          @add="add"
        >
          <transition-group>
            <div class="item" v-for="item in arr2" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">C列</div>
        <draggable
          v-model="arr2"
          group="c"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr3" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "111111111" },
        { id: 2, name: "222222222" },
        { id: 3, name: "333333333" },
        { id: 4, name: "444444444" },
      ],
      arr2: [
        { id: 11, name: "55555555" },
        { id: 21, name: "66666666" },
        { id: 31, name: "77777777" },
        { id: 41, name: "88888888" },
      ],
      arr3: [
        { id: 15, name: "item 1" },
        { id: 25, name: "item 2" },
        { id: 35, name: "item 3" },
        { id: 45, name: "item 4" },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    sort(val) {
      console.log(val);
    },
    add(val) {
      console.log(val);
    },
  },
};
</script>


<style scoped>
.page {
  user-select: none;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}
.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.itxst {
  margin: 10px;
}
.title {
  padding: 6px 12px;
}
.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}
.col + .col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}
.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}
</style>